<template>
  <seconds-kill>
    <div slot="title">花梨秒杀</div>
    <div slot="countdown" class="countdown"></div>
    <div slot="more" class="more-btn">更多</div>

    <media-item slot="media-content" v-for="item in mediaData" :key="item.id">
      <img slot="pic" class="pic" :src="item.img_src" />
      <div slot="text" class="text">¥{{ item.price }}</div>
    </media-item>
  </seconds-kill>
</template>

<script>
import MediaItem from "components/content/MediaItem.vue";
import SecondsKill from "components/content/SecondsKill.vue";
import { countDown } from "common/utils.js";

export default {
  name: "MainSecondsKill",
  data() {
    return {
      mediaData: [
        {
          id: 0,
          img_src: require("assets/images/home/secondsKill(1).jpg"),
          price: 24899,
        },
        {
          id: 1,
          img_src: require("assets/images/home/secondsKill(2).jpg"),
          price: 21.9,
        },
        {
          id: 2,
          img_src: require("assets/images/home/secondsKill(3).jpg"),
          price: 135,
        },
        {
          id: 3,
          img_src: require("assets/images/home/secondsKill(4).jpg"),
          price: 20.9,
        },
        {
          id: 4,
          img_src: require("assets/images/home/secondsKill(5).jpg"),
          price: 588,
        },
        {
          id: 5,
          img_src: require("assets/images/home/secondsKill(6).jpg"),
          price: 329,
        },
        {
          id: 6,
          img_src: require("assets/images/home/secondsKill(7).jpg"),
          price: 969,
        },
        {
          id: 7,
          img_src: require("assets/images/home/secondsKill(8).jpg"),
          price: 12.9,
        },
        {
          id: 8,
          img_src: require("assets/images/home/secondsKill(9).jpg"),
          price: 488,
        },
      ],
    };
  },
  mounted() {
    this.startCount();
    this.getCountDown();
  },
  props: ["endTime"],
  methods: {
    startCount() {
      let times = countDown(this.endTime);
      let timeBox = document.querySelector(".countdown");
      if (timeBox) {
        timeBox.innerHTML = `<span>${times.hour}</span> : <span>${times.minute}</span> :
        <span>${times.second}</span>`;
      }
    },
    getCountDown() {
      setInterval(() => {
        this.startCount();
      }, 1000);
    },
  },
  components: {
    MediaItem,
    SecondsKill,
  },
};
</script>

<style scoped>
</style>